<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>学生选课系统 - 登录</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.7.2/css/all.min.css" rel="stylesheet">
    <link href="../css/login.css" rel="stylesheet">
</head>

<!--*********************登录界面*************************-->


<body class="bg-gradient-to-br from-blue-500 to-indigo-600 min-h-screen flex items-center justify-center p-4">
    <!-- 背景装饰 -->
    <div class="fixed inset-0 overflow-hidden pointer-events-none">
        <div class="absolute -right-10 -top-10 w-64 h-64 bg-white/10 rounded-full blur-3xl"></div>
        <div class="absolute left-1/2 top-1/3 w-96 h-96 bg-white/5 rounded-full blur-3xl"></div>
        <div class="absolute -left-20 bottom-10 w-80 h-80 bg-white/10 rounded-full blur-3xl"></div>
    </div>

    <!-- 登录卡片 -->
    <div class="relative bg-white rounded-2xl shadow-2xl max-w-md w-full overflow-hidden animate-fade-in">
        <!-- 顶部装饰条 -->
        <div class="h-2 bg-gradient-to-r from-blue-500 to-indigo-600"></div>

        <!-- 卡片内容 -->
        <div class="p-8">
            <!-- 标题 -->
            <div class="text-center mb-8">
                <div class="w-16 h-16 bg-blue-100 rounded-full flex items-center justify-center mx-auto mb-4">
                    <i class="fa fa-graduation-cap text-2xl text-blue-600"></i>
                </div>
                <h1 class="text-2xl font-bold text-gray-800">学生选课系统</h1>
                <p class="text-gray-500 mt-2">请登录以继续</p>
            </div>

            <!-- 登录表单 -->
            <form id="loginForm" class="space-y-5" >
                <!-- 学号/工号 -->
                <div>
                    <label for="id" class="block text-sm font-medium text-gray-700 mb-1" >学号/工号</label>
                    <div class="relative">
                        <span class="absolute inset-y-0 left-0 flex items-center pl-3 text-gray-400">
                            <i class="fa fa-user"></i>
                        </span>
                        <input type="text" id="id" name="id" class="pl-10 block w-full rounded-lg border-gray-300 shadow-sm focus:border-blue-500 focus:ring focus:ring-blue-200 focus:ring-opacity-50 transition-all duration-200" placeholder="请输入学号或工号">
                    </div>
                </div>

                <!-- 密码 -->
                <div>
                    <div class="flex justify-between items-center mb-1">
                        <label for="password" class="block text-sm font-medium text-gray-700">密码</label>
                        <a href="#" class="text-sm text-blue-600 hover:text-blue-700 transition-colors duration-200">忘记密码?</a>
                    </div>
                    <div class="relative">
                        <span class="absolute inset-y-0 left-0 flex items-center pl-3 text-gray-400">
                            <i class="fa fa-lock"></i>
                        </span>
                        <input type="password" id="password" name="password" class="pl-10 block w-full rounded-lg border-gray-300 shadow-sm focus:border-blue-500 focus:ring focus:ring-blue-200 focus:ring-opacity-50 transition-all duration-200" placeholder="请输入密码">

                    </div>
                </div>

                <div>
<!--                    <label for="captcha" class="block text-sm font-medium text-gray-700 mb-1"></label>-->
                    <div class="flex space-x-3">
                        <div class="relative flex-1">
<!--               <span class="absolute inset-y-0 left-0 flex items-center pl-3 text-gray-400">-->
<!--                   <i class="fa fa-shield"></i>-->
               </span>
<!--                            <input type="text" id="captcha" name="captcha" class="pl-10 block w-full rounded-lg-->
<!--               border-gray-300 shadow-sm focus:border-blue-500 focus:ring focus:ring-blue-200 focus:ring-opacity-50 transition-all duration-200"-->
<!--                                   placeholder="请输入验证码">-->
                        </div>
<!--                        <div class="w-32 h-10 bg-gray-100 rounded-lg flex items-center justify-center cursor-pointer hover:bg-gray-200 transition-colors duration-200">-->
<!--                            <span class="text-gray-600 font-medium">A1B2</span>-->
<!--                        </div>-->
                    </div>
                </div>


            </form>

            <button id="loginButton" onclick="loginButto()" class="w-full bg-gradient-to-r from-blue-500 to-indigo-600 text-white py-3 px-4 rounded-lg font-medium shadow-lg shadow-blue-500/30 hover:shadow-xl hover:shadow-blue-500/30 transform hover:-translate-y-0.5 transition-all duration-200">
                登录
            </button>

            <!-- 注册链接 -->
            <div class="mt-8 text-center">
                <p class="text-gray-600">
                    还没有账号? <a href="../html/register.html" class="text-blue-600 hover:text-blue-700 font-medium transition-colors duration-200">立即注册</a>
                </p>
            </div>
        </div>
    </div>

    <!-- 页脚 -->
    <div class="absolute bottom-4 text-center text-white/70 text-sm">
        <p>© 2025 学生选课系统 版权所有</p>
    </div>

    <script src="../js/login.js"></script>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</body>
</html>
    